import { formatGMTDate,  toPercent, compareObject } from '../../../../assets/js/util.js'
import echarts from 'echarts'
export default {
    data() {
        return {
            // loading
            loading: true,
            // 默认参数 和 URL
            SRC: '',
            DP: {
                p: '',
                f: ''
            },
            // title
            title: "CPS",
            xlsxTitle:'',
            xlsxTitleQ:'',
            /* 的宽*/
            pageWidth: '100%',
            pickerOptions: {
                shortcuts: [{
                    text: '最近7天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近15天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近30天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            // 默认选择 全平台
            activeIndex2: '0',
            // 请求参数
            postObj: {
                dstart: '',
                dend: ''
            },
            date: '',
            // 分页一
            page1: {
                /*当前页显示数量*/
                pageSize: 20,
                /*每页显示的数量*/
                pageSizes: [10, 20, 50, 100],
                /*dataTotal表数量*/
                dataTotal: 0,
                /*分页器*/
                currentPage: 1,
            },
            tableHeaderAll21: [
                { "prop": "channelName", "label": "渠道", "width": '140px', 'fixed': true },
                { "prop": "activeDevice", "label": "激活设备数", "width": '140px', 'fixed': false },
                { "prop": "newUser", "label": "新增账号数", "width": '140px', 'fixed': false },
                { "prop": "activeUserCount", "label": "活跃账号数", "width": '140px', 'fixed': false },
                { "prop": "payCount", "label": "付费金额（"+localStorage.getItem("ZULONGBICURRENCY")+"）", "width": '160px', 'fixed': false },
                { "prop": "payUserCount", "label": "付费账号数", "width": '140px', 'fixed': false },
                { "prop": "activePayRadio", "label": "活跃付费率", "width": '140px', 'fixed': false },
                { "prop": "payARPU", "label": "付费ARPU", "width": '140px', 'fixed': false },
                { "prop": "activeARPU", "label": "活跃ARPU", "width": '140px', 'fixed': false },
                { "prop": "avgOnlineTime", "label": "人均在线时长(m)", "width": '180px', 'fixed': false },
                { "prop": "the2Left", "label": "新增帐号次日留存率", "width": '200px', 'fixed': false },
                { "prop": "the3Left", "label": "新增帐号3日留存率", "width": '200px', 'fixed': false },
                { "prop": "the7Left", "label": "新增帐号7日留存率", "width": '200px', 'fixed': false },
                { "prop": "the14Left", "label": "新增帐号14日留存率", "width": '200px', 'fixed': false },
                { "prop": "the30Left", "label": "新增帐号30日留存率", "width": '200px', 'fixed': false },
                { "prop": "validatedNewUser", "label": "有效新增用户数", "width": '200px', 'fixed': false },
                { "prop": "loginNewUservalidatedRadio", "label": "登录比新增用户有效率", "width": '200px', 'fixed': false },
                { "prop": "loginRadioAliveUserCount", "label": "登录比留存用户数", "width": '180px', 'fixed': false },
                { "prop": "loginRadio", "label": "一阶登录比", "width": '140px', 'fixed': false },
                { "prop": "loginRadio2", "label": "二阶登录比", "width": '140px', 'fixed': false },
                { "prop": "the7LTV", "label": "7日LTV", "width": '140px', 'fixed': false },
                { "prop": "the14LTV", "label": "14日LTV", "width": '140px', 'fixed': false },
                { "prop": "the30LTV", "label": "30日LTV", "width": '140px', 'fixed': false }
            ],
            tableData21: [],
            tableDataAll21: [],
        }
    },
    methods: {
        // 通用 成功 与 失败
        successFun(data) {
            this.$message({
                message: data,
                type: 'success'
            });
        },
        errorFun(data) {
            this.$message.error(data);
        },
        // 表格下载
        excel(tableIndex, sheet) {
            var that = this;

            that.xlsxTitle = sheet+"-"+that.xlsxTitleQ+"-"+that.postObj.dstart+"到"+that.postObj.dend;
            that.downloadExl(that['tableHeader' + tableIndex], that['tableData' + tableIndex],that.xlsxTitle, sheet)
        },
        // 时间改变 得到起始时间和结束时间
        dateChange(val) {
            if (val === undefined || val === '') {
                this.errorFun('请选择查看时间！')
            } else {
                var t = val.split(' - ')
                this.postObj.dstart = t[0];
                this.postObj.dend = t[1];
                if (this.tableDataAll21.length !== 0) {
                    this.getData(this.postObj);
                }
            }
        },
        // 变成分数
        pencent(data) {
            //转换为%比 
            var arr = ['activePayRadio', 'the2Left', 'the3Left', 'the7Left', 'the14Left', 'the30Left', 'loginNewUservalidatedRadio', 'loginRadio', 'loginRadio2']
            for (var i = 0; i < data.length; i++) {
                for (var j in data[i]) {
                    for (var n = 0; n < arr.length; n++) {
                        if (j === arr[n]) {
                            if(data[i][j]==0 && j!='activePayRadio'){data[i][j]=""}else{data[i][j] = toPercent(data[i][j]);}
                        }
                    }
                }
            }
            return data
        },
        //在线趋势 菜单变换  
        handle(key, keyPath) {
            switch (key) {
                case '0':
                    this.activeIndex2 = key;
                   // this.xlsxTitleQ = "全平台";
                    this.getData(this.postObj, key)
                    break;
                case '2':
                    this.activeIndex2 = key;
                   // this.xlsxTitleQ = "iOS";
                    this.getData(this.postObj, key)
                    break;
                case '3':
                    this.activeIndex2 = key;
                   // this.xlsxTitleQ = "安卓";
                    this.getData(this.postObj, key)
                    break;
            }
        },
        handleSizeChange1(val) {
            this.page1.pageSize = val;
            this.tableControl1();
        },
        handleCurrentChange1(val) {
            this.page1.currentPage = val;
            this.tableControl1();
        },
        tableControl1() {
            this.tableData21 = this.tableDataAll21.slice((this.page1.currentPage - 1) * this.page1.pageSize, this.page1.currentPage * this.page1.pageSize);
        },
        // 获取数据
        getData(data, id) {
            var that = this;
            that.loading = true;
            if(id=="0"){
                that.xlsxTitleQ = "全平台";
            }else if(id=="2"){
                that.xlsxTitleQ = "iOS";
            }else if(id=="3"){
                that.xlsxTitleQ = "安卓";
            }
            var p = new Promise(function(resolve, reject) {
                that.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=searchCPS`, {
                    params: { 'ps': `dstart=${data.dstart}&dend=${data.dend}&platform=${id}&uid=${localStorage.getItem('ZULONGBIUSERID')}` }
                }).then(function(res) {
                    resolve(res.body)
                })
            })
            p.then(function(value) {
                that.tableData1 = [];
                var data = JSON.parse(value)
                var d = JSON.parse(data.replace(/\"\{\"/g, '\{\"').replace(/\"\}\"/g, '\"\}'));
                if (parseInt(d["res"]) === 0) {
                    that.loading = false;
                    that.page1.dataTotal = d.cpsDataList.length;
                    that.tableDataAll21 = d.cpsDataList;
                    that.tableDataAll21.sort(compareObject('activeUserCount', false));
                    that.pencent(d.cpsDataList);
                    that.tableControl1();
                } else {
                    that.getErrorMsg(Number(d.res))
                }
            })
        },
        // 表格排序
        sortChange(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.tableDataAll21.sort(compareObject(column.prop, false));
            } else { //正序
                this.tableDataAll21.sort(compareObject(column.prop, true));
            }
            this.tableControl1();
        }
    },
    computed: {
        // xlsx() {
        //     return this.title + '.xlsx'
        // }
    },
    mounted() {
        // 初始化URL
        this.SRC = this.$store.getters.src;
        this.DP.p = localStorage.getItem('ZULONGBIPROJECTID');
        this.DP.f = localStorage.getItem('ZULONGBIPAGEID');
        this.date = [new Date(new Date().getTime() - 16 * 86400000), new Date(new Date().getTime() - 86400000)];
        this.postObj.dstart = formatGMTDate(new Date().getTime() - 86400000 * 16, true);
        this.postObj.dend = formatGMTDate(new Date().getTime() - 86400000, true);
        this.getData(this.postObj, "0");
    }
}